<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{font-family: "Microsoft YaHei",serif;}
			body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
			ol,ul,li{margin:0;padding:0;list-style:none;}
			img{border:none;}
			
			#wrap{
				position: relative;
				overflow: hidden;
				width: 604px;
				margin: 50px auto 0;
			}
			#wrap img{
				display:none;
				width: 604px;
				height: 500px;
			}
			#wrap img.show{
				display:block;
			}
			#wrap .photoItem{
				width: 100%;
				height: 12.5%;
				background-color: #000;
				color: #eee;
			}
			#wrap .photoItem li{
				float:left;
				width: 33.3%;
				height: 100%;
				text-align:center;
				cursor: pointer;
			}
			#wrap .tab{
				width: 200%;
				height: 12.5%;
				background-color: #000;
				color: #eee;
			}
			#wrap .tab li{
				float:left;
				width: 10%;
				height: 100%;
				text-align:center;
				cursor: pointer;
			}
			#wrap .tab li span,#wrap .photoItem li span{
				line-height: 42.75px;
				font-size: 12px;
			}
			#wrap .tab li.active,#wrap .photoItem li.active{
				background-color: rgba(255,255,255,0.15);
				color: #f3c258;
			}
			.side-left,.side-right{
				position:absolute;
				width:41px;
				height:69px;
				top:0;
				bottom:0;
				margin:auto;
				background-image:url("img/icon-slides.png");
				background-repeat:no-repeat;
			}
			.side-left{
				left:0;
				background-position:-84px 0;
			}
			.side-right{
				right:0;
				background-position:-126px 0;
			}
			.side-left:hover{
				background-position:0;
			}
			.side-right:hover{
				background-position:-42px;
			}
			.clearfix:after{
				content: "";
				display: block;
				clear: both;
			}
			.image{
				display:none;
			}
			.show{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<ul class="photoItem clearfix">
				<li class="active"><span>银魂</span></li>
				<li><span>海贼王</span></li>
				<li><span>火影忍者</span></li>
			</ul>
			<ul class="image image0 show">
				<li><a href=""><img src="img/2/1.jpg" alt="" class="show"></a></li>
				<li><a href=""><img src="img/2/2.jpg" alt=""></a></li>
				<li><a href=""><img src="img/2/3.jpg" alt=""></a></li>
				<li><a href=""><img src="img/2/4.webp" alt=""></a></li>
				<li><a href=""><img src="img/2/5.jpg" alt=""></a></li>
			</ul>
			<ul class="image image1">
				<li><a href=""><img src="img/1/1.png" alt="" class="show"></a></li>
				<li><a href=""><img src="img/1/2.png" alt=""></a></li>
				<li><a href=""><img src="img/1/3.png" alt=""></a></li>
				<li><a href=""><img src="img/1/4.png" alt=""></a></li>
				<li><a href=""><img src="img/1/5.png" alt=""></a></li>
			</ul>
			<ul class="image image2">
				<li><a href=""><img src="img/3/1.webp" alt="" class="show"></a></li>
				<li><a href=""><img src="img/3/2.webp" alt=""></a></li>
				<li><a href=""><img src="img/3/3.webp" alt=""></a></li>
				<li><a href=""><img src="img/3/4.webp" alt=""></a></li>
				<li><a href=""><img src="img/3/5.webp" alt=""></a></li>
			</ul>
			<ul class="tab clearfix">
				<li class="active"><span>1</span></li>
				<li><span>2</span></li>
				<li><span>3</span></li>
				<li><span>4</span></li>
				<li><span>5</span></li>
			</ul>
			<div class="sideBtn side-left"></div>
			<div class="sideBtn side-right"></div>
		</div>
			<script>
				let aImgList = document.querySelectorAll("#wrap .image");
				let aImg0 = document.querySelectorAll("#wrap .image0 img")
				let aImg1 = document.querySelectorAll("#wrap .image1 img")
				let aImg2 = document.querySelectorAll("#wrap .image2 img")
				let aTabs = document.querySelectorAll("#wrap .tab li")
				let aBtns = document.querySelectorAll(".sideBtn")
				let aItem = document.querySelectorAll(".photoItem>li");

				let _choose = 0;
				let index = 0;

				function innerSwitch( Imgs ){
					let index = 0;
					let num = 0;
					for(let i=0;i<5;i++){
						aTabs[i].onclick = function(){
							if(index!==i){
								Imgs[index].className = "";
								aTabs[index].className = "";
								
								aTabs[i].className = "active";
								Imgs[i].className = "show";
								index = i;
							}
						}
					}
					aBtns[0].onclick = function(){
						num--;
						if(num<0){
							num = 4;
						}
						Imgs[index].className = "";
						aTabs[index].className = "";
						
						aTabs[num].className = "active";
						Imgs[num].className = "show";
						index = num;
					}
					aBtns[1].onclick = function(){
						num++;			
						if(num>4){
							num = 0;
						}
						Imgs[index].className = "";
						aTabs[index].className = "";
						
						aTabs[num].className = "active";
						Imgs[num].className = "show";
						index = num;
					}
				}
				
				innerSwitch(aImg0);
				for(let i=0;i<3;i++){
					aItem[i].onclick = function(){
						aItem[index].className = "";
						aItem[i].className = "active";
						index = i;
						_choose = i;
						for(let i=0;i<3;i++){
							if(i===_choose){
								aImgList[i].className = `image image${i} show`;
							}else{
								aImgList[i].className = `image image${i}`;
							}
						}
						aImgList[i].className = `image image${i} show`;
						switch(i){
							case 0:innerSwitch(aImg0);break;
							case 1:innerSwitch(aImg1);break;
							case 2:innerSwitch(aImg2);break;
						}
					}
				}
			</script>
	</body>
</html>
